import tools from "../tools"
import Data from "./data"

export default class Frame extends Element {
    constructor() {
        super()
        /**
         * 监听redis打开
         */
        document.on("redis-open", channel => {
            this.isOpen = true
            this.info = channel.data.info
            this.cid = channel.data.id
            this.activeTab = 1
            this.componentUpdate()
        })
        document.on("db-change", () => {
            this.componentUpdate()
        })

        document.on("delete-conn", (evt) => {
            if (evt.data.id === this.cid) {
                this.isOpen = false
                this.componentUpdate()
            }
        })
        /**
         * 监听redis关闭
         */
        document.on("redis-close", () => {
            this.isOpen = false
            this.componentUpdate()
        })
    }

    cid = ""
    info = {}
    activeTab = 1
    isShowConnList = true
    isOpen = false

    /**
     * 切换tab
     * @param index {number} 1，2
     */
    changeTab(index) {
        this.activeTab = index
        this.componentUpdate()
    }

    /**
     * 切换显示侧边栏
     */
    toggleShowConnList() {
        this.isShowConnList = !this.isShowConnList
        document.post(new Event("toggle-conn-list", {bubbles: true, data: this.isShowConnList}))
        this.componentUpdate()
    }

    /**
     *  渲染基本信息
     * @returns {JSX.Element}
     */
    renderBaseInfo() {
        if (this.activeTab === 1) {
            return <div class={"container"} style={this.activeTab !== 1 ? "display:none" : ""}>
                {
                    this.renderBaseInfoList()
                }
                <div style={"padding-bottom:15px;text-align:center"}>
                    <div class={"btn btn-primary"} id="look-more">查看更多</div>
                </div>
            </div>
        } else {
            return <div><Data/></div>
        }

    }

    renderBaseInfoList() {
        function renderRow(type) {
            let keys = []
            switch (type) {
                case "Server":
                    keys = ["redis_version", "redis_mode", "config_file", "uptime_in_days", "tcp_port"]
                    break
                case "Clients":
                    keys = ["connected_clients", "cluster_connections", "maxclients", "blocked_clients", "clients_in_timeout_table"]
                    break
                case "Memory":
                    keys = [
                        "used_memory_human",
                        "used_memory_rss_human",
                        "used_memory_peak_human",
                        "total_system_memory_human",
                        "maxmemory_human"]
                    break
                case "Stats":
                    keys = ["total_connections_received", "total_commands_processed", "instantaneous_ops_per_sec", "total_net_input_bytes",
                        "total_net_output_bytes", "rejected_connections"]
            }
            return keys
        }

        let data = [
            {type: "Server", icon: "icon-server"},
            {type: "Clients", icon: "icon-desktop-mac"},
            {type: "Memory", icon: "icon-memory"},
            {type: "Stats", icon: "icon-web"}
        ].map(item => <div class={"block"}>
            <div class={"item-icon"}>
                <i class={"icon " + item.icon}></i>
            </div>
            <div class={"item-list"}>

                {
                    renderRow(item.type).map(key =>
                        <div class={"row"}>
                            <div class={"label"}>{key}</div>
                            <div class={"text"}>{!!this.info[item.type] ? this.info[item.type][key] : ""}</div>
                        </div>
                    )}

            </div>
        </div>)
        data.push(<div class={"block"}>
            <div class={"item-icon"}>
                <i class={"icon icon-database"}></i>
            </div>
            <div class={"item-list"}>
                {
                    Object.keys(this.info["Keyspace"])
                        .map(key => {
                            return <div class={"row"} style="padding:0">
                                <div class={"database-name"}>
                                    {key}
                                </div>
                                <div class={"database-info"}>
                                    {
                                        Object.keys(this.info["Keyspace"][key]).map(k =>
                                            <div class={"database-row"}>
                                                <div class={"label"}>{k}</div>
                                                <div class={"text"}>{this.info["Keyspace"][key][k]}</div>
                                            </div>
                                        )
                                    }
                                </div>
                            </div>
                        })
                }

            </div>
        </div>)
        return data
    }

    ["on click at #look-more"](evt, ele) {
        let [x, y] = tools.windowPosition()
        let [w, h] = tools.windowSize()
        return new Promise(resolve => {
            setTimeout(() => {
                let modal = tools.getView().modal({
                    width: 660,
                    height: 380,
                    x: x + w / 2 - 660 / 2,
                    y: y + h / 2 - 380 / 2,
                    url: "/redis/info_detail.html",
                    parameters: {data: this.info}
                })
                resolve(modal)
            })
        })
    }

    render() {
        return this.isOpen === false
            ?
            <div class={"frame-warp"}>
                <div class={"no-connect"}>
                    暂无连接
                </div>
            </div>
            :
            <div class={"frame-warp"} style={this.isShowConnList === false ? "width:100vw" : ""}>
                <div class={"tabs"}>
                    <div class={"btn is-show-conn-list"} onClick={() => this.toggleShowConnList()}>
                        {
                            this.isShowConnList
                                ? <i class={"icon icon-playlist-remove"}></i>
                                : <i class={"icon icon-format-list-bulleted"}></i>
                        }
                    </div>
                    <div class={this.activeTab === 1 ? "btn tab tab-active" : "btn tab"}
                         onClick={() => this.changeTab(1)}>信息
                    </div>
                    <div class={this.activeTab === 2 ? "btn tab tab-active" : "btn tab"}
                         onClick={() => this.changeTab(2)}>数据
                    </div>
                </div>
                <div class={"tab-panel"}>
                    <div class={"tab-panel-content"}>
                        {this.renderBaseInfo()}
                    </div>
                </div>
            </div>
    }
}